<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/shop.css">
</head>

<body>
    <table class="shop">
        <tbody class="shopS">
            <tr class="nav">
                <th class="Son1">Your Item(s)</th>
                <th class="Son2">Quantity</th>
                <th class="Son3">Price</th>
                <th class="Son4">Total Price</th>
                <th class="Son5">Remove</th>
            </tr>
            <!-- <tr class="shopList">
                <td class="imgTd"><img class="shops" src="../images/vans.jpg" alt="" srcset=""></td>
                <td class="titleTd">
                    <h6>Vans范斯 经典系列 Old Skool板鞋运动鞋 低帮经典款男女官方正品</h6>
                    <span>ID:#2001</span>
                    <span>Size:37</span>
                </td>
                <td class="Son2">
                    <span class="reduce">-</span>
                    <input type="text" value="1" class="count">
                    <span class="add">+</span>
                </td>
                <td class="Son3">
                    <del class="oriPrice">399.99 py6</del>
                    <b class="nowPrice">299.98 py6</b>
                </td>
                <td class="Son4">
                    <span class="priceAll">399.99 py6</span>
                    <span class="saveAll">You save 100.01 py6</span>
                </td>
                <td class="Son5">
                    <img class="del" src="../images/del.png" alt="">
                </td>
            </tr>
            </tr> -->

        </tbody>
        <!-- <tfoot>
                        <tr class="countall">
                                <td>
                                        <span><i class="iconL"></i> Continue Shopping</span>
                                    </td>
                                <td class="countRight">
                                        <span class="cartall">Cart Total: <b>1929.45 py6.</b></span>
                                        <span class="savetall">Your Total Saving:579.47 py6.</span>
                                        <button>PROCEED TO CHECKOUT <i class="iconR"></i></button>
                                    </td>
                            </tr>
                    </tfoot> -->
    </table>
    <!-- <script src="../js/model.js"></script> -->

    <script>
        var lists = [
            {
                img: 'vans.jpg',
                title: 'Vans范斯 经典系列 Old Skool板鞋运动鞋 低帮经典款男女官方正品',
                id: 2001,
                size: '37',
                oriPrice: 399.99,
                nowPrice: 299.98,
                num: 1
            },
            {
                img: 'bag.png',
                title: 'Gucci Dressage Original GG Ganvas Tote Bag 296850 Coffe',
                id: 24234,
                size: 'Defalt',
                oriPrice: 180.96,
                nowPrice: 120.69,
                num: 1
            },
            {
                img: 'converse.jpg',
                title: 'CONVERSE匡威官方 Batman 80th 蝙蝠侠80周年联名 高帮 167303C',
                id: 32001,
                size: '37',
                oriPrice: 259.98,
                nowPrice: 209.48,
                num: 1
            },
            {
                img: 'bsdon.jpg',
                title: '波司登冬季新款大毛领羽绒服女中长款厚款防寒冬天外套B80141038',
                id: 5884,
                size: '160/84A',
                oriPrice: 1399.99,
                nowPrice: 1099.30,
                num: 1
            },
            {
                img: 'olay.jpg',
                title: 'Olay玉兰油大红瓶新生塑颜金纯面霜50g 补水保湿修护紧致护肤霜女',
                id: 6854,
                size: '50g/ml',
                oriPrice: 268.00,
                nowPrice: 200.00,
                num: 1
            }
        ]
        let tb = document.querySelector(".shopS");
        let tb1 = document.querySelector(".shop");



        let xuanran = (item) => {
            tb.innerHTML = `   <tr class="nav">
                <th class="Son1">Your Item(s)</th>
                <th class="Son2">Quantity</th>
                <th class="Son3">Price</th>
                <th class="Son4">Total Price</th>
                <th class="Son5">Remove</th>
            </tr>`;

            lists.forEach((item, index) => {
                // 加载页面
                // console.log(item.num)
                tb.innerHTML += ` <tr class="shopList"  >
                <td class="imgTd"><img class="shops" src="../images/${item.img}" alt="" srcset=""></td>
                    <td class="titleTd">
                        <h6>${item.title}</h6>
                        <span>ID:#${item.id}</span>
                        <span>Size:${item.size}</span>
                    </td>
                    <td class="Son2">
                        <span class="reduce">-</span>
                        <input type="text"  class="count" value="${item.num}">
                            <span class="add">+</span>
                        </td>
                        <td class="Son3">
                            <del class="oriPrice">${item.oriPrice} py6</del>
                            <b class="nowPrice">`+ (item.nowPrice * (item.num * 1)).toFixed(2) + ` py6</b>
                        </td>
                        <td class="Son4">
                            <span class="priceAll">${item.nowPrice} py6</span>
                            <span class="saveAll">You save ${((item.oriPrice - item.nowPrice) * item.num).toFixed(2)} py6</span>
                        </td>
                        <td class="Son5">
                            <img class="del" idx="${item.id}"  src="../images/del.png" alt="">
                        </td>
                    </tr>
                    </tr>`
            })
            tb.innerHTML += ` <tfoot><tr class="countall"> 
                    <td>
                                    <span><i class="iconL"></i>Continue Shopping</span>
                </td>
                <td class="countRight">
                   <span class="cartall">Cart Total<b>1929.45 py6.</b></span>
                   <span class="savetall"> Your Total Saving:579.47 py6</span>
            <button> PROCEED TO CHECKOUT  <i class="iconR"></i> </button>
                 </td>
            </tr>
                </tfoot>`
            // shan()
        }
        xuanran(lists);

        // 底部


        // 删除
        let shan = () => {
            let im1 = document.querySelectorAll(".del");
            im1.forEach((item, index) => {
                item.onclick = () => {
                    // 判断idx
                    console.log("ads")
                    let mm = "ID:#" + item.getAttribute("idx")
                    let m1 = item.parentElement.parentElement.querySelectorAll(".titleTd span")
                    if (m1[0].innerHTML == mm) {
                        tb.innerHTML = "asfd"
                        lists.splice(index, 1)
                        xuanran()
                        jisuan()
                        zhekou()
                        // im1 = document.querySelectorAll(".del");
                        shan()
                        zhenjiz()
                    }

                }
            })
        }
        shan()


        // 总价
        let jisuan = () => {
            let a = 0
            let cart = document.querySelector(".cartall b")
            if (lists.length > 0) {
                lists.forEach((item, index) => {
                    a = a + item.nowPrice * item.num
                    cart.innerHTML = a.toFixed(2) + "by6"
                    // console.log("asd")
                })
            } else {
                cart.innerHTML = "0" + "by6"
            }
        }
        jisuan()
        // 折扣
        let zhekou = () => {
            let b = 0
            let save = document.querySelector(".savetall")
            // console.log(lists.length)
            if (lists.length > 0) {
                lists.forEach((item, index) => {
                    b = b + item.oriPrice * item.num - item.nowPrice * item.num
                    save.innerHTML = "Your Total Saving:" + b.toFixed(2) + "by6"
                })
            } else {
                save.innerHTML = "Your Total Saving:" + "0" + "by6"
            }

        }
        zhekou()
        let zhenjiz = () => {
            let add = document.querySelectorAll(".add");
            let reduce = document.querySelectorAll(".reduce");
            let count = document.querySelectorAll(".count");

            for (let i = 0; i < add.length; i++) {
                add[i].onclick = () => {
                    lists[i].num = lists[i].num + 1
                    xuanran()
                    zhenjiz()
                    jisuan()
                    zhekou()
                }
            }


            for (let i = 0; i < reduce.length; i++) {
                reduce[i].onclick = () => {
                    if (lists[i].num >= 2) {
                        lists[i].num = lists[i].num - 1
                        xuanran()
                        zhenjiz()
                        jisuan()

                        zhekou()
                    }
                }
            }
            shan()
        }
        zhenjiz()
    </script>
</body>

</html>